<template>
    <div class="accounting">
        <div class="breadcrumb">
            位置：首页<span>></span>会计法规库<span>></span>{{ getType }}
        </div>

        <div class="title">
            {{ infoData.name }}
        </div>

        <div class="info">
            <div class="info-item">
                <div class="label">发文字号：</div>
                {{ infoData.push_number }}
            </div>
            <div class="info-item">
                <div class="label">发文机关：</div>
                {{ infoData.push_department }}
            </div>
            <div class="info-item">
                <div class="label">发文日期：</div>
                {{ infoData.push_date }}
            </div>
            <div class="info-item">
                <div class="label">效力注释：</div>
                {{ infoData.active_info }}
            </div>
        </div>

        <div v-show="infoData.notice" class="notice">
            <div class="notice-title">小竹提示</div>
            {{ infoData.notice }}
        </div>

        <div
            class="info_content"
            v-html="infoData.info_content"
            @click="imageEnlargement"
        ></div>
        <div style="height: 4.125rem"></div>
        <div class="shoucang">
            <div
                class="but"
                :class="{ 'but-active': infoData.is_collect }"
                @click="setCollection"
            >
                <van-icon
                    v-if="!infoData.is_collect"
                    name="like-o"
                    class="icon"
                    size="1rem"
                />
                <van-icon
                    v-else
                    name="like"
                    color="#FF9B21"
                    class="icon"
                    size="1rem"
                />
                {{ !infoData.is_collect ? "收藏文章" : "已收藏" }}
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { ImagePreview } from "vant";
import { getNormInfo, setNormCollect } from "@/assets/api/regulationsApi.js";
import { getanalysedata2 } from "@/assets/api/indexApi";
import { recommend_policy } from "@/assets/api/quizData";

import {
    goTop,
    goTopSmooth,
    wrapText,
    getArr_objKey,
    replaceurl,
    getText,
} from "@/assets/utils/utils.js";

import moment from "moment";
import { Toast } from "vant";
export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            info_content: "",
            infoData: null,
            id: 0,
            mateInfo: {
                title: "会计法规库",
                keywords: "",
                description: "",
            },
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/kjfgk/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
            typePath: "index",
        };

        data.id = parseInt(params.id.replace(".html", ""));
        data.jsonld["@id"] += params.id;

        const res = await getNormInfo({
            id: data.id,
        });

        if (res.code == 1) {
            data.infoData = res.data;
            data.info_content = replaceurl(
                res.data.info_content,
                res.data.name
            );
            data.mateInfo.name = data.infoData.name;

            let abstract = data.infoData.abstract;
            if (!data.infoData.abstract) {
                abstract = getText(data.infoData.info_content, 90);
            }
            data.mateInfo.description = abstract;

            data.jsonld.name = data.infoData.name;
            data.jsonld.description = abstract;
            data.jsonld.pubDate = data.jsonld.upDate = moment(
                data.infoData.createtime * 1000
            ).format("YYYY-MM-DD");
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.mateInfo.keywords,
                },
            ],
        };
    },
    data() {
        return {
            tabsIndex: 0,
            tabsTwoIndex: 0,

            fontSizeList: ["font-small", "font-medium", "font-large"],
            fontSizeIndex: 1,

            previewList: [""],

            seekInput: "",
            questionsInfo: {},

            loading: false,

            showNoLogin: false,
        };
    },
    created() {},
    mounted() {
        console.log(this.infoData);

        this.$nextTick(() => {
            this.getData();
            goTopSmooth();
            getanalysedata2({
                m_id: 3,
                type: 1,
                code: "PE11",
                describe: this.infoData.name,
            });
        });
    },
    computed: {
        ...mapState("regulations", {
            tabsList: (state) => state.ATabsList,
        }),

        getType: function () {
            if (this.infoData) {
                let text = "";
                if (this.infoData.kjptype == 1) {
                    text = "企业会计";
                    this.typePath = "qykj";
                } else if (this.infoData.kjptype == 2) {
                    text = "证监会";
                    this.typePath = "zjh";
                } else if (this.infoData.kjptype == 3) {
                    text = "政府会计";
                    this.typePath = "zfkj";
                } else if (this.infoData.kjptype == 4) {
                    text = "国际会计";
                    this.typePath = "gjkj";
                } else if (this.infoData.kjptype == 5) {
                    text = "企业内控";
                    this.typePath = "qynk";
                } else if (this.infoData.kjptype == 6) {
                    text = "全行业会计核算";
                    this.typePath = "qhykjhs";
                } else if (this.infoData.kjptype == 7) {
                    text = "其他会计法规";
                    this.typePath = "qtkjfg";
                } else if (this.infoData.kjptype == 8) {
                    text = "全科目核算";
                    this.typePath = "qkmhs";
                }
                return text;
            } else return "";
        },
    },
    methods: {
        ...mapMutations("common", ["getUserInfo2"]),

        async getData() {
            try {
                // this.loading = true;
                const res = await getNormInfo({
                    id: this.id,
                });
                // this.loading = false;

                if (res.code == 1) {
                    this.infoData = res.data;
                    this.info_content = res.data.info_content;
                    this.mateInfo.name = this.infoData.name;
                    this.mateInfo.description = this.infoData.abstract;
                } else if (res.code == -100) {
                    this.$alert(
                        `<div style='text-align: left'>今日免费次数已用完，请您充值成为会员，以享受更多精彩的功能和服务。</div>`,
                        "温馨提示",
                        {
                            customClass: "vip-message-box",
                            dangerouslyUseHTMLString: true,
                            showClose: false,
                            closeOnClickModal: false,
                            confirmButtonText: "加入会员",
                            callback: (action) => {
                                this.$router.push({
                                    path: "/user/myvip",
                                });
                            },
                        }
                    );
                    this.showNoLogin = true;
                }
            } catch (error) {
                this.loading = false;
            }
        },

        getMetaInfo() {
            if (this.$route.params.type == "index") {
                this.mateInfo.title = "小竹会计法规库";
                this.mateInfo.keywords = "小竹会计法规库,会计法规库";
                this.mateInfo.description =
                    "小竹会计法规库汇集最新的会计法规政策及地方性会计法规政策，时时更新会计法规动态，方便会计从业者能得到更多的会计法规查询。";
            } else if (this.$route.params.type == "qykj") {
                this.mateInfo.title = "企业会计法规";
                this.mateInfo.keywords = "企业会计法规";
                this.mateInfo.description =
                    "小竹财税企业会计法规版块，汇集众多企业会计法规。实时更新企业会计法规条例及相关企业会计法规政策出台，并积极推动企业会计法规宣传与发布。";
            } else if (this.$route.params.type == "zjh") {
                this.mateInfo.title = "证监会法规";
                this.mateInfo.keywords = "证监会法规";
                this.mateInfo.description =
                    "小竹财税证监会法规版块，汇集众多证监会法规，实时更新证监会法规条例及相关证监会法规政策出台，并积极推动证监会法规宣传与发布。";
            } else if (this.$route.params.type == "zfkj") {
                this.mateInfo.title = "政府会计法规";
                this.mateInfo.keywords = "政府会计法规";
                this.mateInfo.description =
                    "小竹财税政府会计法规版块，汇集众多政府会计法规，实时更新政府会计法规条例及相关证政府会计法规政策出台，并积极推动政府会计法规宣传与发布。";
            } else if (this.$route.params.type == "gjkj") {
                this.mateInfo.title = "国际会计法规";
                this.mateInfo.keywords = "国际会计法规";
                this.mateInfo.description =
                    "小竹财税国际会计法规版块，汇集众多国际会计法规，实时更新国际会计法规条例及相关国际会计法规政策出台，并积极推动国际会计法规宣传与发布。";
            } else if (this.$route.params.type == "qynk") {
                this.mateInfo.title = "企业会计内控法规";
                this.mateInfo.keywords = "企业会计内控法规";
                this.mateInfo.description =
                    "小竹财税企业会计内控法规版块，汇集众多企业会计内控法规，实时更新企业会计内控法规条例及相关企业会计内控法规政策出台，并积极推动企业会计内控法规宣传与发布。";
            } else if (this.$route.params.type == "qhykjhs") {
                this.mateInfo.title = "全行业会计核算";
                this.mateInfo.keywords = "全行业会计核算";
                this.mateInfo.description =
                    "小竹财税全行业会计核算版块，汇集众多全行业会计核算案例，实时更新全行业会计核算资讯及相关全行业会计核算法规政策出台，并积极推动全行业会计核算宣传与发布。";
            } else if (this.$route.params.type == "qtkjfg") {
                this.mateInfo.title = "会计法规条例";
                this.mateInfo.keywords = "会计法规条例";
                this.mateInfo.description =
                    "小竹财税会计法规条例版块，汇集众多会计法规条例，实时更新会计法规条例及相关会计法规条例政策出台，并积极推动会计法规条例宣传与发布。";
            } else if (this.$route.params.type == "qkmhs") {
                this.mateInfo.title = "全科目会计核算";
                this.mateInfo.keywords = "全科目会计核算";
                this.mateInfo.description =
                    "小竹财税全科目会计核算版块，汇集众多全科目会计核算案例，实时更新全科目会计核算资讯及相关全科目会计核算法规政策出台，并积极推动全科目会计核算法规宣传与发布。";
            }
        },

        // 点击富文本
        imageEnlargement(e) {
            if (e.target.nodeName == "IMG") {
                ImagePreview({
                    images: [e.target.currentSrc],
                    closeable: true,
                });
            }
        },

        // 点击收藏
        async setCollection() {
            const res = await setNormCollect({
                id: this.id,
            });
            if (res.code == 1) {
                this.infoData.is_collect == 0
                    ? (this.infoData.is_collect = 1)
                    : (this.infoData.is_collect = 0);
                if (this.infoData.is_collect == 1) {
                    Toast("收藏成功");
                } else {
                    Toast("取消收藏");
                }
            }
        },

        keywordRed() {
            this.seekInput = this.seekInput.replace(/\s/g, "");
            if (!this.seekInput) return;
            let regex = /^[A-Za-z]+$/;
            if (regex.test(this.seekInput)) return;
            let keywords = [this.seekInput];
            this.info_content = wrapText(this.infoData.info_content, keywords);
        },

        // 回到顶部
        gotop() {
            goTopSmooth();
        },
    },
};
</script>
<style lang="scss" scoped>
.breadcrumb {
    height: 2.28rem;
    line-height: 2.28rem;
    padding-left: 1.43rem;
    font-size: 0.75rem;
    color: #666666;
    background: #e8f4ff;
    border-bottom: 1px solid #f6f6f6;
}

.title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #333333;
    line-height: 1.5;
    width: 89%;
    margin: 0 auto;
    padding-top: 1rem;
}

.info {
    width: 92%;
    margin: 1rem auto 0;
    background: #f3f9ff;
    border-radius: 10px;
    padding: 1rem 1.21rem;
    .info-item {
        display: flex;
        margin-bottom: 0.34rem;
        line-height: 1.5;
        font-weight: 400;
        font-size: 0.75rem;
        color: #3c6c9c;
        .label {
            min-width: 3.8rem;
        }
    }
}

.notice {
    background: #fffbf6;
    width: 92%;
    margin: 0.68rem auto 0;
    border-radius: 10px;
    padding: 1rem 1.21rem;
    font-size: 0.75rem;
    color: #4f3f2b;
    line-height: 1.25rem;
    .notice-title {
        font-weight: 700;
        margin-bottom: 0.2rem;
    }
}

.info_content {
    width: 90%;
    margin: 1rem auto 0;
    &::v-deep em {
        color: #ffffff !important;
        background: #f56c6c;
    }
    &::v-deep img {
        width: 100%;
        margin: 0 auto;
    }
    &::v-deep a {
        text-decoration: underline;
    }
}

.shoucang {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #d8d8d8;
    background-color: #ffffff;
    .but {
        width: 8.75rem;
        height: 2.5rem;
        line-height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.93rem;
        color: #333333;
        background: #fdfdfd;
        border-radius: 2.5rem;
        border: 1px solid #dcdcdc;
        &:active {
            opacity: 0.8;
        }
    }
    .but-active {
        border-color: #ffcd90;
        background-color: #fff8ef;
    }
    .icon {
        padding-right: 0.3rem;
    }
}
</style>
